<template>
<div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        <swiper-slide class="box" v-for="(items,index) in page" :key="index">
            <div class="list" v-for="(item,index) in items">
                <img :src="item.url" alt="">
                <p>{{item.text}}</p>
            </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="box1">
        <span class="left">定位失败</span><span>必游榜单</span>
    </div>
    <div class="line"></div>
</div>
</template>
<script>
    import 'swiper/dist/css/swiper.css'
    import { swiper,swiperSlide } from 'vue-awesome-swiper'
     export default{
         components:{
                swiper,
                swiperSlide
            },
            props:{
                swiper:Array
            },
        data(){
            return{
                swiperOption:{
                    pagination:".swiper-pagination"
            },  
            iconsUrl:[
                {id:"01",text:"景点门票",url:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"},
                {id:"02",text:"深圳必游",url:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png"},
                {id:"03",text:"夜场狂欢",url:"http://img1.qunarzz.com/piao/fusion/1803/4d/a1eda1a2b8414302.png"},
                {id:"04",text:"海洋馆",url:"http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png"},
                {id:"05",text:"泡温泉",url:"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png"},
                {id:"06",text:"深圳动物园",url:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/cba147cf6cfcea7109d0bff6aac6f626.png"},
                {id:"07",text:"世界之窗",url:"http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png"},
                {id:"08",text:"东部华侨城",url:"http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png"},
                {id:"09",text:"一日游",url:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png"},
                {id:"010",text:"玩转长隆",url:"http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png"}
            ]
            }
            },
            computed:{
                page(){
                    const pages=[];
                    this.iconsUrl.forEach((item,index)=>{
                        const page=Math.floor(index / 8);
                        if(!pages[page]){
                            pages[page]=[];
                        }
                        pages[page].push(item);
                    })
                    console.log(pages);
                    return pages;
                }
            }
            }
</script>
<style lang="stylus" scoped>
.line{
    width 100%
    height 10px
    background-color #ccc
    margin:0 0 5px 0
}
.box1 {
    width 100%
    height 50px
    line-height 50px
    display flex
    border-top 1px solid gray
}
.box1 span{
    width 50%
    text-align center
}
.box1 .left{
    border-right 1px solid gray
}
    .box{
        width 100%
        height 180px
        display flex
        flex-wrap wrap
        .list{
            width 25%
            height 80px
            font-size 14px
            img{
                width 55px
                height 55px
            }
        }
    }
</style>